<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/templet/HtmlTemplet.js" />
<div id="htmlTempletTab">
	<div title="API">
	    <h2>$.fn.ccayHtmlTemplate(ajax,datas)</h2>
	    <form class="ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>相关API</h3></samp>
					<span class="ccay-form-input">
						<h3>描述</h3>
					</span>
				</li>
				<li class="ccay-form-row">
			        <samp>ajax</samp>
					<span class="ccay-form-input">ajax参数配置</span>
				</li>
				<li class="ccay-form-row">
			        <samp>datas</samp>
					<span class="ccay-form-input">json数据源</span>
				</li>
			</ul>
		</div>
		</form>
	</div>
	<div title="普通按钮">
		<div  style="width:98%; float:left; padding: 2px 15px 30px 8px">
		<h4><span>html模板方式 通用Template</span></h4>
		<div id='htmlTmpl1'>
			<form class="ccay-form ccay-tmpl">
				 <div class="ccay-form-body">
				 <ul>
					  <li class="ccay-form-row">
					 	<samp>title</samp>
					 	<span class='ccay-form-input'><label>${title}</label></span>
					 </li>
					 <li class="ccay-form-row">
						 <samp>id</samp>
						 <span class='ccay-form-input'>
						 <input type="hidden" id="parentTaskId" name="workflowVO.parentTaskId" value="${id}" />
						 <input type="text" value="${id}" /></span>
					 </li>
					  <li class="ccay-form-row">
						 <samp>link</samp>
						 <span class='ccay-form-input '><a href='${link}'>${linkname}</a></span>
					 </li>
				 	<li class="ccay-form-row">
						 <samp>json data</samp>
						 <span class='ccay-form-input '><a href='${child}'>${child.name}</a></span>
					 </li>
				</ul>
				</div> 
				 <div class="ccay-operate">
				 	<span class="ccay-button" onclick="alert('${id}')">
				 		<a class="ccay-icon execute"></a>
				 		<label>Operate</label>
				 	</span>
				 </div>
			</form>
		</div>
		<script type="text/javascript">
			$(function(){
	 			var datas = {title:'模板引擎',
				id:"123",
				linkname:'google',
				link:'www.google.com',
				child:{
						name:'对象做标签属性是必须用单引号\'${child}\'',num:1111
					  }
					}
					$('#htmlTmpl1').ccayHtmlTemplate(null,datas);
				})
		</script>
		</div>
		<h3>html 源码:</h3>
		<div class="codeArea">
   		<pre id='html'>
&lt;div id='htmlTmpl1q'>
	&lt;form class="ccay-form ccay-tmpl">
		 &lt;div class="ccay-form-body">
		 &lt;ul>
			  &lt;li class="ccay-form-row">
			 	&lt;samp>title&lt;/samp>
			 	&lt;span class='ccay-form-input'>&lt;label>${title}&lt;/label>&lt;/span>
			 &lt;/li>
			 &lt;li class="ccay-form-row">
				 &lt;samp>id&lt;/samp>
				 &lt;span class='ccay-form-input'>
				 &lt;input type="hidden" id="parentTaskId" name="workflowVO.parentTaskId" value="${id}" />
				 &lt;input type="text" value="${id}" />&lt;/span>
			 &lt;/li>
			  &lt;li class="ccay-form-row">
				 &lt;samp>link&lt;/samp>
				 &lt;span class='ccay-form-input '>&lt;a href='${link}'>${linkname}&lt;/a>&lt;/span>
			 &lt;/li>
		 	&lt;li class="ccay-form-row">
				 &lt;samp>json data&lt;/samp>
				 &lt;span class='ccay-form-input '>&lt;a href='${child}'>${child.name}&lt;/a>&lt;/span>
			 &lt;/li>
		&lt;/ul>
		&lt;/div> 
		 &lt;div class="ccay-operate">
		 	&lt;input type="button" value="Operate" onclick="alert('${id}')"/>
		 &lt;/div>
	&lt;/form>
  &lt;/div>
		</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js'>
var datas = {title:'模板引擎',
			id:"123",
			linkname:'google',
			link:'www.google.com',
			child:{
				name:'对象做标签属性是必须用单引号\'${child}\''
				,num:1111
			}
	};
$('#htmlTmpl1q').ccayHtmlTemplate(null,datas);
			</pre>
		</div>
		<div>
			<a 	onclick="Ccay.example.openTry('#htmlTempletTab',$('#js').html(),$('#html').html())">亲自试一试</a>
		</div>
	   </div>
	   
	   
	   
	  <div title="功能按钮">
	    <div  style="width:98%; float:left; padding: 2px 15px 30px 8px">
			<h4><span>html模板方式 通用Template</span></h4>
		<div id='htmlTmpl2'>
		<table class="ccay-table">
			<tr>
				<th>No</th>
			 	<th>name</th>
			 	<th>age</th>
			 	<th>sex</th>
			</tr>
		<tbody class='ccay-tmpl-list' mapping="users">
				<tr>
 					<td>${#index}</td>
 					<td>${name}</td>
 					<td>${age}</td>
 					<td>${formatSex(sex)}</td>
 				</tr>
		</tbody>
		</table>
			<div class='ccay-tmpl'>
				<fieldset>
					<legend>${renderer}</legend>
					<!-- mapping 循环 -->
					<ul class='ccay-tmpl-list' mapping="users" >
						${#buildchild(index,data,users)}
					</ul>
			   </fieldset>
		    </div>
		</div>
		<script type="text/javascript">
		$(function(){
		 	var datas = {
					renderer:'性别男：(渲染器方式)',
					users:[
			           {name:"隐形杀手",age:29,sex:1},
			           {name:"索拉",age:22,sex:0},
			           {name:"fesyo",age:23,sex:1},
			           {name:"恋妖壶",age:18,sex:0},
			           {name:"竜崎",age:25,sex:1},
			           {name:"你不懂的",age:30,sex:0}
			         ]};
			$('#htmlTmpl2').ccayHtmlTemplate(null,datas);
		})
		function formatSex(sex){
			return sex ? '男' : '女';
		}
		
		/*function editchild(){
			/**
			 *这里能够得到输入框里面的值
			 */
			/* var id;
			 var value;
			$("input[id^='users']").each(function(){
				id=this.id;
				value=this.value;
			});
			
			var fetch=$("#index").html();
			alert(fetch);
		}*/
		
		function buildchild(index,user,users)
		{
			if(user.sex)
				return  "<li>" + index + "/" + users.length + " : " +  user.name + "</li>";
		}
		</script>
	                     
        </div>
		<div class="clear"></div>
		<br>
		
		
		<h3>html 源码:</h3>
<div class="codeArea">
   <pre id='html1'>
&lt;div id='htmlTmpl3'>
&lt;table class="ccay-table">
	&lt;tr>
	  &lt;th>No&lt;/th>
 	  &lt;th>name&lt;/th>
 	  &lt;th>age&lt;/th>
 	  &lt;th>sex&lt;/th>
	  &lt;/tr>
&lt;tbody class='ccay-tmpl-list' mapping="users">
	&lt;tr>
	  &lt;td>${#index}&lt;/td>
	  &lt;td>${name}&lt;/td>
      &lt;td>${age}&lt;/td>
	  &lt;td>${formatSex(sex)}&lt;/td>
	&lt;/tr>
&lt;/tbody>
&lt;/table>
  &lt;div class='ccay-tmpl'>
	&lt;fieldset>
	  &lt;legend>${renderer}&lt;/legend>
	    &lt;ul class='ccay-tmpl-list' mapping="users" >
		  ${#buildchild(index,data,users)}
	    &lt;/ul>
     &lt;/fieldset>
   &lt;/div>
&lt;/div>
	</pre>
</div>
		
<h3>js 源码:</h3>
<div class="codeArea">
<pre id='js1'>
var datas = {
	renderer:'性别男：(渲染器方式)',
	users:[
          {name:"隐形杀手",age:29,sex:1},
          {name:"索拉",age:22,sex:0},
          {name:"fesyo",age:23,sex:1},
          {name:"恋妖壶",age:18,sex:0},
          {name:"竜崎",age:25,sex:1},
          {name:"你不懂的",age:30,sex:0}
        ]};
$('#htmlTmpl3').ccayHtmlTemplate(null,datas);

function formatSex(sex){
	return sex ? '男' : '女';
}

function buildchild(index,user,users)
{
	if(user.sex)
		return  "&lt;li>" + index + "/" + users.length + " : " +  user.name + "&lt;/li>";
}
</pre>
</div>
<div>
	<a onclick="Ccay.example.openTry('#htmlTempletTab',$('#js1').html(),$('#html1').html())">亲自试一试</a>
</div>
</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:200px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
 	 
		 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
</div>
